<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="box">
    <div>
        <ul>
            <li>
                <div>
                    <input type="checkbox" v-model="isAllChecked" >全选/全不选
                </div>
            </li>
            <li v-for="item,index in dataList" :key="item.id">
                <div>
                    <input type="checkbox" v-model="checkedList" :value="item">
                </div>
                <div>
                    <img :src="item.poster" alt="">
                </div>
                <div>
                    <div>{{item.title}}</div>
                    <div>价格：{{item.price}}</div>
                </div>
                <div>
                    <button @click="item.number--" :disabled="item.number <= 1">-</button>
                    {{item.number}}
                    <button @click="item.number++" :disabled="item.number >= item.limit">+</button>
                </div>
                <button @click="handleDel(index,item.id)">删除</button>
            </li>
            <li>
                <div>总金额：{{sum}}</div>
            </li>
            <template v-if="dataList.length === 0">
                <li>购物车空空如也</li>
            </template>

        </ul>
    </div>
</div>
</body>

<script>
    var obj = {
        data() {
            return {
                checkedList:[],
                dataList: [
                    {
                        id: 1,
                        title: "商品1",
                        price: 10,
                        number: 1,
                        poster: "./images/shop1.png",
                        limit: 5
                    },
                    {
                        id: 2,
                        title: "商品2",
                        price: 20,
                        number: 1,
                        poster: "./images/shop2.jpg",
                        limit: 6
                    },
                    {
                        id: 3,
                        title: "商品3",
                        price: 30,
                        number: 1,
                        poster: "./images/shop3.jpg",
                        limit: 3
                    },
                ]
            }
        },
        computed:{
            isAllChecked:{
                get(){
                    return this.checkedList.length === this.dataList.length
                },
                set(checked){
                    this.checkedList = checked?this.dataList : []
                }
            },
            sum(){
                let total = 0
                return this.checkedList.reduce((total,item)=>total + item.price*item.number,0)
            },
        },
        methods:{
            handleDel(index,id){
                console.log(index)
                this.dataList.splice(index,1)
                this.checkedList  = this.checkedList.filter(item=>item.id !== id)
            }
        }
    }
    var app = Vue.createApp(obj).mount("#box")
</script>
<style>
    li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border: 1px solid lightgray;
    }

    li img {
        width: 100px;
    }

    span{
        float: left;
    }

</style>
</html>